<template>
  <div class="login">
    <!-- 图片logo -->
    <div class="logo"></div>
    <div class="L">
      <div class="container">
        <!-- 图片title -->
        <div class="title"></div>
        <!-- 登录正文 -->
        <el-form class="login-password" ref="form" :rules="rules" :model="form" size="small">
          <el-form-item prop="loginName">
            <el-input placeholder="请输入账号邮箱" v-model="form.loginName"></el-input>
          </el-form-item>
          <el-form-item prop="loginPassword">
            <el-input placeholder="请输入密码" v-model="form.loginPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item class="remember">
            <el-checkbox v-model="form.captcha">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item class="btn-container">
            <el-button type="primary" @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="R">
      <!-- 右侧背景, 跟随屏高、宽不变形缩放 -->
      <img src="~@/assets/imgs/login_bg.png" height="100%" alt="">
      <!-- 正在进行的调研正文(定位) -->
      <div class="container_tip">
        <div class="tip_txt"></div>
        <ul>
          <li v-for="(item, i) in survey_list" :key="i" class="survey_list">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { _cbc_encrypt } from '@/utils/ase'
import { login } from '@/api/login'
import Ase_Keys from '@/utils/key'
import store from '@/store'
import { omit } from 'lodash-es'
export default {
  name: "Login",
  data() {
    return {
      form: {
        loginName: "dustinliu@zero2ipo.com.cn",
        loginPassword: "dustinliu",
      },
      rules: {
        loginName: [
          { required: true, message: "请输入账号邮箱" },
          { type: "email", message: "请填写正确的邮箱格式" }
        ],
        loginPassword: [{ required: true, message: "请输入密码" }],
      },
      survey_list: [ '清科中国股权投资市场2022年机构有限合', '中国股权投资市场2022年政府引导基金排', '2022「投资界TOP100」 投资人评选提名' ]
    };
  },
  created() {
    localStorage.clear()
  },
  methods: {
    async submitForm() {
      try {
        let pwd = _cbc_encrypt(this.form.loginPassword, Ase_Keys.KEY, Ase_Keys.IV)
        await this.$refs.form.validate();
        await login({loginName: this.form.loginName, loginPassword: pwd}).then(res => {
          console.log('res', res);
          if(res.code == 200){
            store.commit('setToken', res.data.token)
            store.commit('setUserInfo', omit(res.data, 'token'))
            this.$router.push({ name: 'layout' })
          }
        })
        // 设置token, 存储到localStorage中, 在 \store\index.js文件中可修改
        // this.$store.commit('setToken', '=,=sauhlidsaiohljbfdjs13jhdsfkjdsnkjahgds')
        // this.$store.commit('setUserInfo', { id: '25874111', name: '马若鹏', pos: '总经理', photo: 'https://img0.baidu.com/it/u=3510476007,2937706385&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500' })
        // this.$router.push({ name: 'layout' })
      } catch (err) {
        console.log("error:", err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login{
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
  .logo{
    position: absolute;
    left: 60px;
    top: 60px;
    width: 245px;
    height: 46px;
    background: url(@/assets/imgs/logo.png) no-repeat;
    background-size: 100%;
  }
  .L{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .container{
      width: 500px;
      .title{
        width: 380px;
        height: 45px;
        margin-bottom: 68px;
        background: url(@/assets/imgs/login_title.png) no-repeat;
        background-size: 100%;
      }
      .el-form-item:nth-child(1){
        margin-bottom: 30px;
      }
      .el-form-item.remember :deep(.el-form-item__content){
        height: 22px;
        line-height: 22px;
        margin-bottom: 77px;
      }
      .el-input{
        :deep(.el-input__inner){
          height: 60px;
          border: none;
          background: #F6F9FF;
          font-size: 18px;
        }
      }
      .el-button{
        width: 100%;
        height: 60px;
        font-size: 20px;
      }
    }
  }
  .R{
    position: relative;
    height: 100%;
    .container_tip{
      position: absolute;
      left: 16%;
      top: 35%;
      width: 380px;
      padding: 38px 34px 10px 26px;
      background: #fff;
      box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.1);
      border-radius: 20px 20px 0px 20px;
      .tip_txt{
        width: 169px;
        height: 25px;
        margin-bottom: 39px;
        background: url(@/assets/imgs/login_tip.png) no-repeat;
        background-size: 100%;
      }
      .survey_list{
        position: relative;
        min-height: 80px;
        line-height: 25px;
        margin-bottom: 20px;
        padding: 16px 23px 14px 27px;
        color: #124AC4;
        background: #e3ebfb;
        font-size: 18px;
        font-style: italic;
        font-weight: 600;
        border-radius: 4px;
        &:before{
          content: '';
          position: absolute;
          left: 10px;
          top: 23px;
          width: 10px;
          height: 10px;
          background: #fff;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
